import React, {Component} from 'react';
import {GridContent} from '@ant-design/pro-layout';
import {Menu} from 'antd';
import {connect} from 'dva';
import BaseView from './components/base';
import SecurityView from './components/security';
import styles from './style.less';

const {Item} = Menu;
const menuMap = [
  { value: "base", label: "基本设置" },
  { value: "security", label: "修改密码" },
];
class AccountSettings extends Component<any, any> {
  state = {
    selectKey: 'base',
  };
  // 获取menu
  getMenu = () => {
    return menuMap.map(item => <Item key={item.value}>{item.label}</Item>);
  };
  // 获取右边展示的标题
  getRightTitle = () => {
    const { selectKey } = this.state;
    let title = "";
    menuMap.forEach(item =>{
      if(item.value === selectKey){
        title = item.label;
      }
    });
    return title;
  };
  selectKey = (key:any) => {
    this.setState({ selectKey: key });
  };
  renderChildren = () => {
    const { selectKey } = this.state;
    switch (selectKey) {
      case 'base':
        return <BaseView />;
      case "security":
        return <SecurityView />;
      default:
        break;
    }
    return null;
  };

  render() {
    const { selectKey } = this.state;
    return (
        <GridContent>
          <div className={styles.main}>
            <div className={styles.leftMenu}>
              <Menu
                mode={"inline"}
                selectedKeys={[selectKey]}
                onClick={({key}) => this.selectKey(key)}
              >
                {this.getMenu()}
              </Menu>
            </div>
            <div className={styles.right}>
              <div className={styles.title}>{this.getRightTitle()}</div>
              {this.renderChildren()}
            </div>
          </div>
        </GridContent>
    );
  }
}
export default connect()(AccountSettings);
